<template>
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="main-search">
      <el-form-item label="客户姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入客户姓名" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="客户电话" prop="tel">
        <el-input v-model="queryParams.tel" placeholder="请输入客户电话" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="客户状态" prop="customerStatus">
        <el-select v-model="queryParams.customerStatus" placeholder="请选择客户状态" clearable style="width: 160px">
          <el-option v-for="dict in dict.type.customer_status" :key="dict.value"
                     :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="星级" prop="level">
        <el-select v-model="queryParams.level" placeholder="请选择星级" clearable style="width: 160px">
          <el-option v-for="dict in dict.type.level_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="贷款类型" prop="loanType">
        <el-select v-model="queryParams.loanType" placeholder="请选择贷款类型" clearable style="width: 160px">
          <el-option v-for="dict in dict.type.loan_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="未更新" prop="notUpdateDay">
        <el-input v-model="queryParams.notUpdateDay" type="number" placeholder="未更新超过天数" clearable
                  @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="时间" prop="timeInfo">
        <el-select v-model="queryParams.timeType" placeholder="不限" clearable style="width: 80px">
          <el-option
            v-for="dict in dict.type.time_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select v-model="queryParams.applyTimeScope" placeholder="不限" clearable style="width: 80px"
                   @change="applyTimeScopeChange">
          <el-option
            v-for="dict in dict.type.apply_time_scope"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime" v-if="queryParams.applyTimeScope == 99">
        <el-date-picker
          v-model="queryParams.startTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :clearable="false"
          :editable="false"
          placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" v-if="queryParams.applyTimeScope == 99">
        <el-date-picker
          v-model="queryParams.endTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :clearable="false"
          :editable="false"
          placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="重要客户" prop="vip">
        <el-select v-model="queryParams.vip" placeholder="-不限-" clearable style="width: 160px">
          <el-option
            v-for="dict in dict.type.is_vip"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="贷款额度" prop="applyMoney">
        <el-select v-model="queryParams.applyMoney" placeholder="-不限-" clearable style="width: 160px">
          <el-option
            v-for="dict in dict.type.quota_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="bz">
        <el-input v-model="queryParams.bz" placeholder="-不限-" clearable @keyup.enter.native="handleQuery"
                  style="width: 160px"/>
      </el-form-item>
      <el-form-item label="房产" prop="house">
        <el-select v-model="queryParams.house" placeholder="-不限-" clearable>
          <el-option
            v-for="dict in dict.type.house_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="来源" prop="source">
        <el-select v-model="queryParams.source" placeholder="-不限-" clearable style="width: 160px">
          <el-option
            v-for="dict in dict.type.source_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="公积金" prop="fund">
        <el-select v-model="queryParams.fund" placeholder="-不限-" clearable style="width: 160px">
          <el-option
            v-for="dict in dict.type.fund_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" :height="580">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="ID" align="center" prop="id" v-if="false"/>
      <el-table-column label="姓名" align="center" prop="name" width="100px" fixed="left"/>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sex_type" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="customerStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.customer_status" :value="scope.row.customerStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="公司状态" align="center" prop="companyStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.company_status" :value="scope.row.companyStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="星级" align="center" prop="level">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.level_type" :value="scope.row.level"/>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age"/>
      <el-table-column label="部门名称" align="center" prop="deptName"/>
      <el-table-column label="备注" align="center" prop="bz" width="400px">
        <template slot-scope="scope">
          <div class="messageCard" v-html="scope.row.bz">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="lastRemarkTime" sortable width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastRemarkTime, '{y}-{m}-{d}  {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顾问" align="center" prop="busName"/>
      <el-table-column label="房" align="center" prop="house">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.house_type" :value="scope.row.house"/>
        </template>
      </el-table-column>
      <el-table-column label="车" align="center" prop="car">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.car_type" :value="scope.row.car"/>
        </template>
      </el-table-column>
      <el-table-column label="保单" align="center" prop="warranty">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.warranty_type" :value="scope.row.warranty"/>
        </template>
      </el-table-column>
      <el-table-column label="社保" align="center" prop="insurance">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.insurance_type" :value="scope.row.insurance"/>
        </template>
      </el-table-column>
      <el-table-column label="公积金" align="center" prop="fund">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.fund_type" :value="scope.row.fund"/>
        </template>
      </el-table-column>
      <el-table-column label="申请额度" align="center" prop="applyMoney"/>
      <el-table-column label="分配时间" align="center" prop="lastRemarkTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastRemarkTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="实际申请时间" align="center" prop="realityApplyTime">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.realityApplyTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="贷款类型" align="center" prop="loanType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.loan_type" :value="scope.row.loanType"/>
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center" prop="source">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.source_type" :value="scope.row.source"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="城市" align="center" prop="regionName"/>-->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">

    </div>
  </el-dialog>
</template>

<script>
import {loadParentOrg, customerPoolPull} from "@/api/customer/customer";
import {superiorCustomerList, deptPoolPull} from "@/api/customerPool/customerPool";

export default {
  name: "PullSuperiorCustomer",
  dicts: ['fund_type', 'customer_status', 'sex_type', 'car_type', 'insurance_type', 'house_type', 'warranty_type',
    'level_type', 'loan_type', 'company_status', 'quota_type', 'is_vip', 'time_type', 'apply_time_scope',
    'source_type'],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户信息表格数据
      customerList: [],
      // 弹出层标题
      title: "查看客户池",
      // 是否显示弹出层
      open: false,
      // 省级地址
      provinceList: [],
      // 市区地址
      searchCityList: [],
      // 区县
      searchCountyList: [],
      // 市区地址
      formCityList: [],
      // 区县
      formCountyList: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        name: undefined,
        tel: undefined,
        level: undefined,
        loanType: undefined,
        age: undefined,
        sex: undefined,
        label: undefined,
        education: undefined,
        house: undefined,
        car: undefined,
        warranty: undefined,
        insurance: undefined,
        fund: undefined,
        salary: undefined,
        applyMoney: undefined,
        province: undefined,
        city: undefined,
        county: undefined,
        manager: undefined,
        customerStatus: undefined,
        companyStatus: undefined,
        distributeDeptId: undefined,
        share: undefined,
        source: undefined,
        dataSource: undefined,
        vip: undefined,
        taskId: undefined,
        createDate: undefined,
        bz: undefined,
        notUpdateDay: undefined, // 未超出天数
        timeType: undefined,  // 时间类型
        applyTimeScope: undefined, // 申请时间
        startTime: undefined, // 自定义开始时间
        endTime: undefined, // 自定义结束时间
        currentType: this.currentType
      },
      // customerPull 客户拉取   deptPull 部门直接拉取
      type: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    // 更改为按钮按钮点击后在触发
    //this.getList();
  },
  methods: {

    /**  日期时间触发改变 */
    applyTimeScopeChange(val) {
      if (val != 99) {
        this.queryParams.startTime = undefined;
        this.queryParams.endTime = undefined;
      }
    },

    /** 打开弹窗按钮 */
    openDialog(type) {
      this.type = type;
      this.open = true;
      this.resetQuery();
      this.resetForm("queryForm");
      this.loadPOrg('0', 0, 's')
    },
    /** 加载组织 **/
    loadPOrg(parentId, level, type) {
      loadParentOrg(parentId).then(response => {
        if (level == '0') {
          this.provinceList = response.data
        } else if (level == '1') {
          if (type === 's') {
            this.searchCityList = response.data
          } else {
            this.formCityList = response.data
          }
        } else {
          if (type == 's') {
            this.searchCountyList = response.data
          } else {
            this.formCountyList = response.data
          }
        }
      })
    },
    getChildren(parentId, level, type) {
      this.clearSelect(level, type)
      this.loadPOrg(parentId, level, type)
    },

    clearSelect(level, type) {
      if (type == 's') {
        if (level == '1') {
          this.searchCityList = []
          this.queryParams.city = ''
        }
        this.queryParams.county = ''
        this.searchCountyList = []
      } else {
        if (level == '1') {
          this.formCityList = []
          this.form.city = ''
        }
        this.form.county = ''
        this.formCountyList = []
      }
    },
    /** 查询客户信息列表 */
    getList() {
      this.loading = true;
      superiorCustomerList(this.queryParams).then(response => {
        this.customerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      // 提交数据
      const cIds =  this.ids
      if (cIds.length == 0) {
        this.open = false;
      } else {
        const customerIds = [];
        cIds.forEach(item => {
          const obj = this.customerList.find(it => it.id === item);
          const data = {"id": obj.id, "deptId": obj.distributeDeptId, "tel": obj.tel, "name": obj.name};
          customerIds.push(data);
        })
        const data = {
          "type": this.type,
          "customerPoolVos": customerIds
        }
        if ("deptPull" === this.type) {
          this.buttonLoading = true;
          deptPoolPull(data).then(res => {
            this.$modal.msgSuccess("拉取成功");
            this.open = false;
            if (this.$parent.getList) {
              this.$parent.getList();
            }
            if (this.$parent.$parent.refreshList) {
              console.log("二级弹框取消getList刷新了")
              this.$parent.$parent.refreshList();
            }
          }).finally(()=>{
            this.buttonLoading = false;
          })
        } else {
          this.buttonLoading = true;
          customerPoolPull(data).then(res => {
            const msg = res.data;
            this.open = false;
            if (msg.info) {
              this.$alert(msg.info, '认领信息', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确定',
              });
            } else {
              this.$modal.msgSuccess("拉取成功");
            }
            if (this.$parent.getList) {
              this.$parent.getList();
            }
            if (this.$parent.$parent.refreshList) {
              console.log("二级弹框取消getList刷新了")
              this.$parent.$parent.refreshList();
            }
          }).finally(()=>{
            this.buttonLoading = false;
          })
        }
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        tel: undefined,
        level: undefined,
        loanType: undefined,
        age: undefined,
        sex: undefined,
        label: undefined,
        education: undefined,
        house: undefined,
        car: undefined,
        warranty: undefined,
        insurance: undefined,
        fund: undefined,
        salary: undefined,
        applyMoney: undefined,
        province: undefined,
        city: undefined,
        county: undefined,
        remark: undefined,
        manager: undefined,
        customerStatus: undefined,
        companyStatus: undefined,
        distributeDeptId: undefined,
        share: undefined,
        source: undefined,
        dataSource: undefined,
        vip: undefined,
        taskId: undefined,
        createBy: undefined,
        createDate: undefined,
        updateBy: undefined,
        updateTime: undefined,
        bz: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      if (this.form.vip) {
        this.form.vip = undefined;
      }
      this.queryParams.applyTimeScope = undefined;
      this.queryParams.timeType = undefined;
      this.searchCityList = [];
      this.searchCountyList = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

  }
};
</script>
<style scoped>
.messageCard {
  overflow-x:hidden;
  overflow-y:scroll;
  word-break:break-all;
  width: 390px;
  max-height: 100px ;
  text-align: left;
  float:left;
  text-align:left;
  text-overflow:ellipsis;
  color:#313131;
}

.messageCard::-webkit-scrollbar {
  width: 4px;
}

.messageCard::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.messageCard::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
